<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>壁纸APP - 我的空间</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #007AFF;
            --bg-color: #f5f5f5;
            --text-color: #333;
            --card-bg: #fff;
            --border-color: #f5f5f5;
            --secondary-text: #999;
            --shadow-color: rgba(0,0,0,0.1);
            --highlight-color: #f0f7ff;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: all 0.3s ease;
        }
        
        body.dark-theme {
            --primary-color: #3a9bff;
            --bg-color: #121212;
            --text-color: #f5f5f5;
            --card-bg: #1e1e1e;
            --border-color: #2c2c2c;
            --secondary-text: #aaa;
            --shadow-color: rgba(0,0,0,0.3);
            --highlight-color: #1a2c42;
        }

        /* 顶部标题栏 */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background: var(--card-bg);
            padding: 8px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 1px 3px var(--shadow-color);
            z-index: 100;
            transition: background-color 0.3s ease;
        }

        .header h1 {
            font-size: 18px;
            font-weight: 500;
        }
        
        .theme-toggle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .theme-toggle:active {
            background-color: var(--highlight-color);
            transform: scale(0.95);
        }

        /* 主内容区 */
        .main-content {
            margin-top: 44px;
            margin-bottom: 49px;
            overflow-y: auto;
            padding-bottom: 20px;
        }

        /* 顶部壁纸图片 */
        .wallpaper-header {
            width: 100%;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .wallpaper-header img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 应用标志和名称 */
        .app-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 2;
            transition: all 0.5s ease;
        }
        
        /* 用户信息显示 */
        .user-profile {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 1;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s ease 0.3s;
        }
        
        .user-profile.visible {
            opacity: 1;
            visibility: visible;
        }
        
        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
            margin: 0 auto 15px;
            overflow: hidden;
            border: 2px solid rgba(255,255,255,0.5);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-name {
            font-size: 22px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            margin-bottom: 5px;
        }
        
        .user-id {
            font-size: 14px;
            opacity: 0.8;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        /* 登录后的logo样式 */
        .app-logo.logged-in {
            top: 10px;
            left: 20px;
            transform: none;
            display: flex;
            align-items: center;
            text-align: left;
        }

        .app-logo .logo-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.5s ease;
        }
        
        .app-logo.logged-in .logo-circle {
            width: 40px;
            height: 40px;
            margin: 0 10px 0 0;
        }

        .logo-circle::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px dashed rgba(0,255,0,0.5);
            animation: rotate 10s linear infinite;
        }

        .logo-circle::after {
            content: '';
            position: absolute;
            width: 90%;
            height: 90%;
            border-radius: 50%;
            border: 2px dashed rgba(0,255,0,0.3);
            animation: rotate 15s linear infinite reverse;
        }

        .logo-inner {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #43cea2, #185a9d);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            z-index: 2;
            transition: all 0.5s ease;
        }
        
        .app-logo.logged-in .logo-inner {
            width: 30px;
            height: 30px;
            font-size: 16px;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .app-name {
            font-size: 24px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            transition: all 0.5s ease;
        }
        
        .app-logo.logged-in .app-name {
            font-size: 16px;
            margin: 0;
        }

        /* 登录按钮 */
        .login-btn {
            display: inline-block;
            background: #1a73e8;
            color: white;
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 16px;
            margin-top: 15px;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: transform 0.2s ease, background 0.3s ease, opacity 0.5s ease;
        }
        
        .app-logo.logged-in .login-btn {
            opacity: 0;
            visibility: hidden;
            position: absolute;
        }
        
        .login-btn:active {
            transform: scale(0.95);
            background: #1565c0;
        }
        
        /* 半模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 200;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .login-modal {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--card-bg);
            border-radius: 20px 20px 0 0;
            padding: 24px 20px;
            z-index: 201;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            box-shadow: 0 -2px 10px var(--shadow-color);
        }
        
        .login-modal.active {
            transform: translateY(0);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-color);
        }
        
        .close-modal {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary-text);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .close-modal:active {
            background-color: var(--highlight-color);
            transform: scale(0.95);
        }
        
        .huawei-login {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .huawei-icon {
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px auto;
        }
        
        .huawei-icon img {
            width: 100%;
            height: auto;
        }
        
        .huawei-login-btn {
            background-color: #c7000b;
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 24px;
            font-size: 16px;
            font-weight: 500;
            width: 100%;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 2px 8px rgba(199, 0, 11, 0.3);
        }
        
        .huawei-login-btn:active {
            background-color: #a70009;
            transform: scale(0.98);
        }

        /* 用户数据统计区域 */
        .user-stats {
            padding: 20px 16px 10px;
            background-color: var(--card-bg);
            margin-bottom: 10px;
        }
        
        .stats-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .stat-item {
            flex: 1;
            text-align: center;
            padding: 10px 0;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--secondary-text);
        }
        
        /* 快捷功能入口 */
        .quick-actions {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
        }
        
        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
        
        .action-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--highlight-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            color: var(--primary-color);
            font-size: 20px;
            transition: transform 0.2s ease;
        }
        
        .action-icon:active {
            transform: scale(0.95);
            background-color: var(--primary-color);
            color: white;
        }
        
        .action-label {
            font-size: 12px;
            color: var(--text-color);
            transition: color 0.3s ease;
        }
        
        /* 菜单列表 */
        .menu-container {
            padding: 20px 16px;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            margin-bottom: 12px;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 2px 6px var(--shadow-color);
            position: relative;
        }

        .menu-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f8d775;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 18px;
            color: #fff;
        }

        .menu-icon.blue {
            background: #7eb6ff;
        }

        .menu-icon.green {
            background: #7ed957;
        }

        .menu-icon.purple {
            background: #c278f8;
        }

        .menu-icon.cyan {
            background: #5ce0e6;
        }

        .menu-text {
            flex: 1;
            font-size: 16px;
        }

        .menu-arrow {
            color: #ccc;
            font-size: 18px;
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 49px;
            background: var(--card-bg);
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -1px 3px var(--shadow-color);
            transition: background-color 0.3s ease;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--secondary-text);
            font-size: 12px;
            text-decoration: none;
            padding: 8px 0;
            width: 33.33%;
            transition: color 0.3s ease;
        }

        .nav-item.active {
            color: var(--primary-color);
        }
    </style>
</head>
<body>
    <!-- 顶部标题栏 -->
    <div class="header">
        <div></div> <!-- 占位元素，保持标题居中 -->
        <h1>我的</h1>
        <div class="theme-toggle" id="themeToggle">
            <i class="fas fa-moon"></i>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 顶部壁纸图片 -->
        <div class="wallpaper-header">
            <img src="https://picsum.photos/800/400?random=1" alt="自然壁纸">
            <div class="app-logo">
                <div class="logo-circle">
                    <div class="logo-inner">🌊</div>
                </div>
                <div class="app-name">自然壁纸</div>
                <a href="javascript:void(0)" class="login-btn" id="loginBtn">登录</a>
            </div>
            <!-- 用户信息显示 -->
            <div class="user-profile" id="userProfile">
                <div class="user-avatar">
                    <img src="https://picsum.photos/200/200?random=10" alt="用户头像">
                </div>
                <div class="user-name">自然壁纸用户</div>
                <div class="user-id">ID: 10086</div>
            </div>
        </div>

        <!-- 用户数据统计区域 -->
        <div class="user-stats">
            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-value">0</div>
                    <div class="stat-label">浏览天数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">0</div>
                    <div class="stat-label">壁纸收藏</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">0</div>
                    <div class="stat-label">下载次数</div>
                </div>
            </div>
            <div class="quick-actions">
                <div class="action-item" id="favorite-action">
                    <div class="action-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="action-label">我喜欢的壁纸</div>
                </div>
                <div class="action-item" id="download-action">
                    <div class="action-icon">
                        <i class="fas fa-download"></i>
                    </div>
                    <div class="action-label">已下载壁纸</div>
                </div>
                <div class="action-item" id="history-action">
                    <div class="action-icon">
                        <i class="fas fa-history"></i>
                    </div>
                    <div class="action-label">浏览历史</div>
                </div>
            </div>
        </div>
        
        <!-- 菜单列表 -->
        <div class="menu-container">
            <div class="menu-item">
                <div class="menu-icon">📱</div>
                <div class="menu-text">版本 v1.2.1</div>
                <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
            </div>
            
            <div class="menu-item">
                <div class="menu-icon blue">📄</div>
                <div class="menu-text">用户协议</div>
                <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
            </div>
            
            <div class="menu-item">
                <div class="menu-icon green">📞</div>
                <div class="menu-text">联系我们</div>
                <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
            </div>
            
            <div class="menu-item">
                <div class="menu-icon purple">💬</div>
                <div class="menu-text">意见反馈</div>
                <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
            </div>
            
            <div class="menu-item">
                <div class="menu-icon cyan">🌙</div>
                <div class="menu-text">夜间模式</div>
                <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="index.html" class="nav-item">
            <span>首页</span>
        </a>
        <a href="category.html" class="nav-item">
            <span>分类</span>
        </a>
        <a href="video.html" class="nav-item">
            <span>视频</span>
        </a>
        <a href="my.html" class="nav-item active">
            <span>我的</span>
        </a>
    </div>
    
    <!-- 登录半模态框 -->
    <div class="modal-overlay" id="modalOverlay"></div>
    <div class="login-modal" id="loginModal">
        <div class="modal-header">
            <div class="modal-title">华为账号登录</div>
            <div class="close-modal" id="closeModal">
                <i class="fas fa-times"></i>
            </div>
        </div>
        <div class="huawei-login">
            <div class="huawei-icon">
                <img src="https://img0.baidu.com/it/u=2007219514,3684347995&fm=253&fmt=auto&app=138&f=JPEG?w=808&h=800" alt="华为账号图标">
            </div>
            <button class="huawei-login-btn">华为账号一键登录</button>
        </div>
    </div>
    
    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('themeToggle');
        const body = document.body;
        
        // 检查本地存储中的主题设置
        if (localStorage.getItem('darkTheme') === 'true') {
            body.classList.add('dark-theme');
            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }
        
        // 主题切换事件
        themeToggle.addEventListener('click', function() {
            body.classList.toggle('dark-theme');
            
            if (body.classList.contains('dark-theme')) {
                localStorage.setItem('darkTheme', 'true');
                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                localStorage.setItem('darkTheme', 'false');
                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        });
        
        // 快捷功能区域点击效果
        const favoriteAction = document.getElementById('favorite-action');
        const downloadAction = document.getElementById('download-action');
        const historyAction = document.getElementById('history-action');
        
        // 添加点击事件，跳转到对应的详情页面
        favoriteAction.addEventListener('click', function() {
            window.location.href = 'detail.html?type=favorite';
        });
        
        downloadAction.addEventListener('click', function() {
            window.location.href = 'detail.html?type=download';
        });
        
        historyAction.addEventListener('click', function() {
            window.location.href = 'detail.html?type=history';
        });
        
        // 菜单项点击效果
        const menuItems = document.querySelectorAll('.menu-item');
        menuItems.forEach(item => {
            item.addEventListener('click', function() {
                // 添加点击波纹效果
                this.style.backgroundColor = 'var(--highlight-color)';
                setTimeout(() => {
                    this.style.backgroundColor = '';
                }, 300);
            });
        });
        
        // 登录模态框功能
        const loginBtn = document.getElementById('loginBtn');
        const loginModal = document.getElementById('loginModal');
        const modalOverlay = document.getElementById('modalOverlay');
        const closeModal = document.getElementById('closeModal');
        
        // 打开模态框
        loginBtn.addEventListener('click', function() {
            modalOverlay.classList.add('active');
            loginModal.classList.add('active');
            // 添加一点延迟，使动画更流畅
            setTimeout(() => {
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            }, 50);
        });
        
        // 关闭模态框的函数
        function closeLoginModal() {
            modalOverlay.classList.remove('active');
            loginModal.classList.remove('active');
            document.body.style.overflow = ''; // 恢复背景滚动
        }
        
        // 点击关闭按钮
        closeModal.addEventListener('click', closeLoginModal);
        
        // 点击遮罩层关闭
        modalOverlay.addEventListener('click', closeLoginModal);
        
        // 阻止模态框本身的点击事件冒泡到遮罩层
        loginModal.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
        // 华为一键登录按钮点击事件
        const huaweiLoginBtn = document.querySelector('.huawei-login-btn');
        const appLogo = document.querySelector('.app-logo');
        const userProfile = document.getElementById('userProfile');
        
        huaweiLoginBtn.addEventListener('click', function() {
            // 关闭登录模态框
            closeLoginModal();
            
            // 添加登录后的样式类，触发动画效果
            setTimeout(() => {
                appLogo.classList.add('logged-in');
                // 显示用户信息
                setTimeout(() => {
                    userProfile.classList.add('visible');
                }, 200);
            }, 300);
        });
        
    </script>
</body>
</html>